import { useState } from 'react'
import classNames from 'classnames'
import {
  NavBar,
  Button,
  Input,
  DatePicker,
  Toast
} from 'antd-mobile'

import BillIcon from '@/components/Icon/'
import { billListData } from '@/constants/'
import './index.scss'
import dayjs from 'dayjs'
import { addBillToList } from '@/store/modules/billStore'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'

const New = () => {

  const dispatch=useDispatch()
  const navigate=useNavigate()

  /* 控制记账类型状态 */
  const [billType, setBillType] = useState('pay')

  /* 控制时间控件是否显示 */
  const [dateVisible, setDateVisible] = useState(false)

  /* 控制时间 */
  const [date, setDate] = useState(new Date())
  const onDateChange=(value)=>{
    setDate(value)
  }

    /* 控制金额 */
  const [money, setMoney] = useState(0)
  const onMoneyChange=(value)=>{
    setMoney(value)
  }
  //控制用途
  const [useFor, setUseFor] = useState('')
  const onUseForChange=(value)=>{
    setUseFor(value)
  }


 //收集表单
 const saveBill=()=>{
  const data={
    type:billType,
    money:billType==='pay'?-money:+money,
    date:date,
    useFor:useFor
  }
  console.log(data);
  dispatch(addBillToList(data))
  setDateVisible(false)
  Toast.show({
    icon: 'success',
    content: '保存成功',
  })
  navigate('/month')
 }

  /* render */
  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={()=>navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(billType === 'pay' ? 'selected' : '')}
            onClick={() => setBillType('pay')}
          >
            支出
          </Button>
          <Button
            shape="rounded"
            className={classNames(billType === 'income' ? 'selected' : '')}
            onClick={() => setBillType('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={()=>setDateVisible(true)}>
              <BillIcon type="calendar" className="icon" />
              <span className="text">{dayjs(date).format('YYYY-MM-DD')}</span>
              {/* 时间选择器 */}
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={dateVisible}
                onConfirm={onDateChange}
                onCancel={()=>setDateVisible(false)}
                onClose={()=>setDateVisible(false)}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={money}
                onChange={onMoneyChange}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {/* 数据区域 */}
        {
          billListData[`${ billType }`].map(billItem => (
            <div
              className="kaType"
              key={billItem.type}
            >
              <div className="title">{ billItem.name }</div>
              <div className="list">
                {
                  billItem.list.map(item => (
                    <div
                      key={item.type}
                      className={classNames('item',item.type===useFor?'selected':'')}
                      onClick={()=>onUseForChange(item.type)}
                    >
                      <div className="icon">
                        <BillIcon type={ item.type } />
                      </div>
                      <div className="text">{ item.name }</div>
                    </div>
                  ))
                }
              </div>
            </div>
          ))
        }
      </div>

      <div className="btns">
        <Button className="btn save" onClick={()=>saveBill()}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New
